<template>
  <div v-loading="pageLoading">
    <div class="header-btn">
      <div>新增权益</div>
      <div>
        <el-button type="primary" @click="createCoupon">确认</el-button>
        <el-button plain type="info" @click="$router.back()">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <el-form ref="couponForm" :model="couponForm" :rules="couponRules" label-position="right" label-width="140px"
               style="position: relative">
        <el-form-item label="供应商:" prop="providerId">
          <el-select v-model="couponForm.providerId" placeholder="请选择" style="width: 400px" filterable>
            <el-option v-for="item in supplierOptions" :key="item.id" :label="item.supplierName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权益名称:" prop="name">
          <el-input v-model="couponForm.name" placeholder="请输入" popper-class="minWidth-inp" style="width: 400px">
          </el-input>
        </el-form-item>
<!--        <el-form-item label="权益数量:" prop="sumNum">-->
<!--          <el-input-number v-model="couponForm.sumNum" :min="0" :precision="0" :step="1"-->
<!--                           :trigger-on-focus="false" controls-position="right" placeholder="请输入" popper-class="minWidth-inp"-->
<!--                           style="width: 400px">-->
<!--          </el-input-number>-->
<!--        </el-form-item>-->
        <el-form-item label="已发放数量:" prop="giveNum">
          <el-input-number v-model="couponForm.giveNum" :min="0" :precision="0" :step="1"
                           :trigger-on-focus="false" controls-position="right" placeholder="请输入" popper-class="minWidth-inp"
                           style="width: 400px">
          </el-input-number>
        </el-form-item>
        <el-form-item label="权益总价值:" prop="sumMoney">
          <el-input-number v-model="couponForm.sumMoney" :min="0" :precision="0" :step="1"
                           :trigger-on-focus="false" controls-position="right" placeholder="请输入" popper-class="minWidth-inp"
                           style="width: 400px">
          </el-input-number>
        </el-form-item>
        <!--        <el-form-item label="截止日期" prop="endTime">-->
        <!--          <el-date-picker v-model="couponForm.endTime" :picker-options="pickerOptions" format="yyyy-MM-dd"-->
        <!--                          placeholder="请选择日期"-->
        <!--                          style="width: 400px;" type="date" value-format="yyyy-MM-dd"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="是否限制领取次数:" prop="isLimit">
          <el-radio-group v-model="couponForm.isLimit" style="width: 400px;">
            <el-radio :label="1">
              <span style="margin-right: 20px">是</span>
              <el-input-number v-show="couponForm.isLimit" v-model="couponForm.limitNum" :min="1" :precision="0" :step="1"
                               controls-position="right" placeholder="请输入" popper-class="minWidth-inp"
                               style="width: 120px;">
              </el-input-number>
              <span v-show="couponForm.isLimit == '1'" style="color: #606266!important;"> 次</span>
            </el-radio>
            <el-radio :label="0" style="width: 100px" :style="couponForm.isLimit == '0' ? 'margin-left:140px':''">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input v-model="couponForm.remark" :autosize="{ minRows: 2 }" placeholder="请输入说明" style="width: 400px"
                    type="textarea">
          </el-input>
        </el-form-item>
        <el-form-item label="执行员工组:" prop="deptIdList">
          <el-select v-model="couponForm.deptIdList" multiple placeholder="请选择" style="width: 400px">
            <el-option v-for="item in groupOptions" :key="item.groupIdValue" :label="item.name"
                       :value="item.groupIdValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模版配置:" prop="pageType">
          <el-select v-model="couponForm.pageType" filterable placeholder="请选择" style="width: 400px">
            <el-option v-for="item in pageTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                       :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {querySupplierList} from '@/api/communityOperating/supplier.js'
import {addCoupon} from '@/api/communityOperating/coupon.js'
import {getGroup} from '@/api/system/staff.js'

export default {
  name: 'SendMessage',
  data() {
    return {
      couponForm: {
        providerId: '',
        sumNum: '',
        name: '',
        sumMoney: '',
        giveNum: '',
        isLimit: 1,
        // endTime: '',
        limitNum: '1',
        remark: '',
        deptIdList: [],
        pageType: '',
      },
      couponRules: {
        providerId: [
          {required: true, message: '请选择供应商', trigger: 'blur'},
        ],
        sumMoney: [
          {required: true, message: '请输入权益总价值', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入权益名称', trigger: 'blur'},
          {max: 32, message: '您录入字数超过32字', trigger: 'blur'},
        ],
        sumNum: [
          {required: true, message: '请输入权益数量', trigger: 'blur'},
        ],
        giveNum: [
          {required: true, message: '请输入已发送数量', trigger: 'blur'},
        ],
        isLimit: [
          {
            required: true,
            message: '请选择是否限制领取次数',
            trigger: 'blur',
          },
        ],
        // endTime:  [
        //   {required: true, message: '请选择截止日期', trigger: 'change'},
        // ],
        deptIdList: [
          {required: true, message: '请选择执行员工组', trigger: 'blur'},
        ],
        remark: [{max: 640, message: '您录入字数超过640字', trigger: 'blur'}],
        pageType: [{
          required:true, message: '请选择权益模版配置', trigger: 'blur'
        }]
      },
      radio: '',
      supplierOptions: [],
      groupOptions: [],
      pageTypeOptions: [],
      value: '',
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() <=
            (new Date().getTime() - 24 * 60 * 60 * 1000)
          );
        },
      },
      pageLoading: false,
    }
  },
  created() {
  },
  mounted() {
    this.querySupplierList()
    this.getGroup()
    this.getPageTypeOptions()
  },
  methods: {
    // 获取供应商
    async querySupplierList() {
      const {rows} = await querySupplierList({state: 0})
      this.supplierOptions = rows
      // console.log(res);
    },
    getPageTypeOptions(){
      this.pageTypeOptions = []
      this.getDicts("coupon_model_page_type").then((res) => {
        if (res.code === 200) {
          this.pageTypeOptions = res.data
        }
      });
    },
    // 获取员工组
    async getGroup() {
      const {rows} = await getGroup()
      this.groupOptions = rows
      // console.log(res);
    },
    createCoupon() {
      console.log(111)
      this.pageLoading = true
      this.$refs.couponForm.validate(async (isok) => {
        console.log(isok)
        if (isok) {
          console.log(111)
          const res = await addCoupon(this.couponForm)
          if (res.code === 200) {
            this.$message.success(res.data)
            // this.$router.back()
            this.$router.go(-1)
          }else{
            this.pageLoading = false
          }
          this.pageLoading = false
        } else {
          this.$message.error('您还未录入完成，请核对后提交')
          this.pageLoading = false
        }
      })
      // console.log(this.couponForm,'===this.couponForm');
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
  padding-top: 10px;
}

::v-deep.el-input-number.is-controls-right .el-input__inner {
  text-align: left;
}

</style>
